<!-- 此页包含二级评论展示：sub-comment-content -->
<template>
	<view class="content">
		<!-- 间隔条 -->
		<view class="plate-between"></view>
		<!-- 二级评论 -->
		<view class="common-content-body">
			<!-- 二级评论内容 -->
			<view class="sub-comment-content">
				<!-- 列表项目 -->
				<view class="comment-list-item">
					<!-- 用户信息 -->
					<view class="account-info vip">
						<!-- 用户头像 -->
						<view class="account-head" >
							<!-- 头像图片容器 -->
							<view class="account-head-img">
								<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
							</view>
							<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
							<icon type="" class="account-hat hat-appreciation"></icon>
						</view>
						<!-- 文字和图标信息 -->
						<view class="account-info-content">
							<!-- 基础信息 -->
							<view class="base-info">
								<text class="account-nickName">用户名甲乙丙丁戊己</text>
								<text class="writer-sign">作者</text>
								<view class="account-level"><text>999</text></view>
								<!-- 男性 -->
								<icon type="" class="imgIcon icon-male"></icon>
								<!-- 女性 -->
								<icon type="" class="imgIcon icon-female"></icon>
							</view>
							<!-- 附加信息 -->
							<view class="plus-info">
								<!-- VIP铭牌 -->
								<text class="account-nameplate">22</text>
								<!-- SVIP铭牌 -->
								<!-- <text class="account-nameplate">22</text> -->
								<!-- 店铺 -->
								<icon type="" class="imgIcon icon-store"></icon>
								<!-- 品牌 -->
								<icon type="" class="imgIcon icon-brand"></icon>
								<!-- 认证 -->
								<icon type="" class="imgIcon icon-tobacco"></icon>
								<!-- 鉴赏家 -->
								<icon type="" class="imgIcon icon-evaluation"></icon>
							</view>
							<!-- 时间 -->
							<view class="time-info">
								<text>2019-11-12 10:21:10</text>
							</view>
						</view>

					</view>
					<!-- 评论内容 -->
					<view class="comment-item-content">
						<text>店里环境非常好，唱歌气氛非常嗨，极力推荐啊！！！</text>
					</view>
				</view>
			</view>
			<!-- 一级评论内容 -->
			<!-- 贴标签 -->
			<view class="post-tag-list">
				<!-- 此处仅仅是演示，极限情况不会超过4个 -->
				<icon type="" class="imgTag post-tag tag-marrow"></icon>
				<icon type="" class="imgTag post-tag tag-excellent"></icon>
				<icon type="" class="imgTag post-tag tag-beginner"></icon>
			</view>
			<!-- 用户信息 -->
			<view class="account-info post-card-account-info svip">
				<!-- 用户头像 -->
				<view class="account-head" >
					<!-- 头像图片容器 -->
					<view class="account-head-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
					<icon type="" class="account-hat hat-appreciation"></icon>
				</view>
				<!-- 文字和图标信息 -->
				<view class="account-info-content">
					<!-- 基础信息 -->
					<view class="base-info">
						<text class="account-nickName">用户名甲乙丙丁戊己</text>
						<view class="account-level"><text>999</text></view>
						<!-- 男性 -->
						<icon type="" class="imgIcon icon-male"></icon>
						<!-- 女性 -->
						<icon type="" class="imgIcon icon-female"></icon>
					</view>
					<!-- 附加信息 -->
					<view class="plus-info">
						<!-- VIP铭牌 -->
						<text class="account-nameplate">22</text>
						<!-- SVIP铭牌 -->
						<!-- <text class="account-nameplate">22</text> -->
						<!-- 店铺 -->
						<icon type="" class="imgIcon icon-store"></icon>
						<!-- 品牌 -->
						<icon type="" class="imgIcon icon-brand"></icon>
						<!-- 认证 -->
						<icon type="" class="imgIcon icon-tobacco"></icon>
						<!-- 鉴赏家 -->
						<icon type="" class="imgIcon icon-evaluation"></icon>
					</view>
					<!-- 时间 -->
					<view class="time-info">
						<text>2019-11-12 10:21:10</text>
					</view>
				</view>
				<!-- 功能 -->
				<view class="post-head-actions">
					<!-- 关注 -->
					<button @click="" class="small-btn btn-focus-small"></button>
				</view>
			</view>
			<!-- 详情内容 -->
			<view class="detail-content">
				<!-- 帖子内容 -->
				<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
				它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
				<!-- 详情中的单个运用的图片尽量放大 -->
				<image @click="" src="../../static/temp-photo.jpg" mode="widthFix" class="full-img"></image>
				<!-- 九宫格图片 -->
				<view class="img-nine-grid">
					<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>

				<!-- 引用卡片 -->
				<view class="quote-card" @click="">
					<!-- 预览图,去掉后，剩余内容自动充满 -->
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<!-- 引用内容 -->
					<view class="quote-content">
						<!-- 雪茄英文名 -->
						<text class="cigar-en-name">Ramon Allones Specially Selected</text>
						<!-- 雪茄中文名 -->
						<text class="cigar-cn-name">莱蒙特选</text>
						<!-- 间隔线 -->
						<view class="spacing-line"></view>
						<!-- 五星 -->
						<view class="five-star">
							<uni-rate size="16" :touchable="false" :value="3.5" allow-half :readonly="true"/>3.5
						</view>
						<!-- 引用雪茄数据 -->
						<view class="quote-content-detail quote-cigar-content-detail">
							<view>
								<text>发布年份：</text>
								<text>2001</text>
							</view>
							<view>
								<text>发布地区：</text>
								<text>中国四川石方中国四川石方中国四川石方</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 地址栏 -->
			<text class="content-address">中国北京西长安街13号</text>
			<!-- 警告条 -->
			<text class="post-wrong-tip">
				雪茄文化交流，吸烟有害健康，未成年人禁入!
			</text>
			<!-- 阅读量 -->
			<view class="view-count">
				<icon class="fontIcon icon-view" type=""/> 阅读量：1581
			</view>
		</view>
		<!-- 间隔条 -->
		<view class="plate-between"></view>
		<!-- 打赏展示 -->
		<view class="reward-content">
			<text class="reward-number">共有 8 人打赏了文章</text>
			<view class="reward-account-list">
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="account-head-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 间隔条 -->
		<view class="plate-between"></view>
		
		<!-- 评论区 -->
		<view class="content-comment">
			<!-- 评论头部 -->
			<view class="comment-head">
				<text class="comment-title">所有评论</text>
				<view class="comment-sort">
					<button class="sort-button selected">最热</button>
					<button class="sort-button">最新</button>
				</view>
			</view>
			<!-- 评论列表 -->
			<view class="comment-list">
				<view class="content-empty empty-comment-bg">
					评论空空，期待你的留言
				</view>
				<!-- 列表项目 -->
				<view class="comment-list-item">
					<!-- 用户信息 -->
					<view class="account-info vip">
						<!-- 用户头像 -->
						<view class="account-head" >
							<!-- 头像图片容器 -->
							<view class="account-head-img">
								<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
							</view>
							<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
							<icon type="" class="account-hat hat-appreciation"></icon>
						</view>
						<!-- 文字和图标信息 -->
						<view class="account-info-content">
							<!-- 基础信息 -->
							<view class="base-info">
								<text class="account-nickName">用户名甲乙丙丁戊己</text>
								<text class="writer-sign">作者</text>
								<view class="account-level"><text>999</text></view>
								<!-- 男性 -->
								<icon type="" class="imgIcon icon-male"></icon>
								<!-- 女性 -->
								<icon type="" class="imgIcon icon-female"></icon>
							</view>
							<!-- 附加信息 -->
							<view class="plus-info">
								<!-- VIP铭牌 -->
								<text class="account-nameplate">22</text>
								<!-- SVIP铭牌 -->
								<!-- <text class="account-nameplate">22</text> -->
								<!-- 店铺 -->
								<icon type="" class="imgIcon icon-store"></icon>
								<!-- 品牌 -->
								<icon type="" class="imgIcon icon-brand"></icon>
								<!-- 认证 -->
								<icon type="" class="imgIcon icon-tobacco"></icon>
								<!-- 鉴赏家 -->
								<icon type="" class="imgIcon icon-evaluation"></icon>
							</view>
							<!-- 时间 -->
							<view class="time-info">
								<text>2019-11-12 10:21:10</text>
							</view>
						</view>
						<!-- 功能 -->
						<view class="post-head-actions">
							<!-- 帖子点赞 -->
							<!-- 自己已经点赞过就加样式thumbs-selected，如果取消点赞，就去掉这个样式 -->
							<!-- 没有人点赞过数字为空就可以 -->
							<!-- 数字位数不能超过3个，如果超过，显示+ -->
							<view class="wrap-thumbs thumbs-selected">
								<icon type="" class="fontIcon icon-thumbs"></icon>
								<text class="like-number">999+</text> 
							</view>
						</view>
					</view>
					<!-- 评论内容 -->
					<view class="comment-item-content">
						<text>店里环境非常好，唱歌气氛非常嗨，极力推荐啊！！！</text>
						<view class="img-nine-grid">
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<button class="comment-item-more">还有2条回复 &gt;</button>
					</view>
				</view>
				<!-- 列表项目 -->
				<view class="comment-list-item">
					<!-- 用户信息 -->
					<view class="account-info">
						<!-- 用户头像 -->
						<view class="account-head" >
							<!-- 头像图片容器 -->
							<view class="account-head-img">
								<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
							</view>
						</view>
						<!-- 文字和图标信息 -->
						<view class="account-info-content">
							<!-- 基础信息 -->
							<view class="base-info">
								<text class="account-nickName">匿名用户</text>
							</view>
							<!-- 时间 -->
							<view class="time-info">
								<text>2019-11-12 10:21:10</text>
							</view>
						</view>
						<!-- 功能 -->
						<view class="post-head-actions">
							<!-- 帖子点赞 -->
							<!-- 自己已经点赞过就加样式thumbs-selected，如果取消点赞，就去掉这个样式 -->
							<!-- 没有人点赞过数字为空就可以 -->
							<!-- 数字位数不能超过3个，如果超过，显示+ -->
							<view class="wrap-thumbs">
								<icon type="" class="fontIcon icon-thumbs"></icon>
								<text class="like-number"> </text> 
							</view>
						</view>
					</view>
					<!-- 评论内容 -->
					<view class="comment-item-content">
						<text>店里环境非常好，唱歌气氛非常嗨，极力推荐啊！！！</text>
						<view class="img-nine-grid">
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<button class="comment-item-more">还有2条回复 &gt;</button>
					</view>
				</view>
			</view>
			<view class="noMore-content">
				- 没有个更多评论了 -
			</view>
		</view>
		<!-- 底栏 -->
		<view class="footBar foot-common-content">
			<view class="commentBar">
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-comment"></icon>
					<text>1.2W</text>
				</view>
				<input class="footBar-input" focus placeholder="友善的发言更受欢迎～" />
				<view class="commentBar-btn btn-selected">
					<icon type="" class="fontIcon icon-thumbs"></icon>
					<text>9999</text>
				</view>
				<view class="commentBar-btn btn-selected">
					<icon type="" class="fontIcon icon-collect"></icon>
					<text>收藏</text>
				</view>
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-share"></icon>
					<text>转发</text>
				</view>
			</view>
		</view>
	</view>

</template>